@import (reference) "./../shared/common";
@import (reference) "./../shared/color";
@border: 1px solid #EAEAEA;
@border-radius: 5px;
@height-tab: 95px;
ul.cm-tab-list li.tab-list-item.menu-left {
  width: 100px;
}

.tab-list-default {
  height: 100%;
  width: 100%;
  padding: 0;
  text-align: center;
  list-style: none;
  // background-color: @list-bg-grey;
  .tab-list-item {
    margin: 1px 0;
  }
  a.tab-list-link {
    .red-bg-white-fg;
    .transition(none, 0.2s);
    .transition-property(~"color,background-color");
    display: inline-block;
    padding: 5px;
    border: @border;
    border-radius: @border-radius;
  }
}

.tab-list-tab {
  .cm-tab-list {
    .display-flex(row);
    background-color: @color-gray-view-background;
    margin: 0;
  }
  .tab-list-item {
    background-color: transparent;
    border-right: 1px solid #D7D7D7;
    .flex-grow(1);
    .tab-list-link {
      display: block;
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: @color-black-light;
      font-size: 1.4rem;
      border-radius: 0;
      margin: 0;
      &:hover {
        background-color: #E3E3E3;
      }
      &.active,
      &:active {
        text-decoration: none;
        position: relative;
        background: white;
      }
    }
  }
}

.tab-list-primary {
  .cm-tab-list {
    // background-color: @color-gray-view-background;
    margin: 0;
    height: 100%;
    .display-flex(row, flex-start, center);
    // height: 100%;
  }
  .tab-list-item {
    &:hover {
      position: relative;
      .tab-list-sub-list {
        display: block;
        z-index: 50;
        .tab-list-link {
          &:hover {
            &::after {
              content: none;
            }
          }
        }
      }
    }
  }
  .tab-list-link {
    color: @color-black-normal;
    display: block;
    text-align: center;
    // height: 20px;
    min-width: 30px;
    margin: 0 2px;
    border-radius: 4px;
    font-size: 1.2rem;
    // line-height: 20px;
    &:hover,
    &.active,
    &:active {
      position: relative;
      background: @color-gray-dark;
      color: @color-gray-view-background;
      text-decoration: none;
    }
  }
  .tab-list-sub-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: auto;
    white-space: nowrap;
  }
}

.tab-list-top {
  .cm-tab-list {
    // background-color: @color-gray-view-background;
    margin: 0;
    height: 100%;
    .display-flex(row, flex-start, center);
    // height: 100%;
  }
  .tab-list-item {
    &:hover {
      position: relative;
      .tab-list-sub-list {
        display: block;
        z-index: 50;
        .tab-list-link {
          &:hover {
            &::after {
              content: none;
            }
          }
        }
      }
    }
  }
  .tab-list-link {
    color: @color-black-normal;
    display: block;
    text-align: center;
    height: 24px;
    min-width: 30px;
    margin: 0 2px;
    border-radius: 4px;
    font-size: 1.4rem;
    line-height: 24px;
    &:hover,
    &.active,
    &:active {
      position: relative;
      background: @color-gray-dark;
      color: @color-gray-view-background;
      text-decoration: none;
    }
  }
  .tab-list-sub-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: auto;
    white-space: nowrap;
  }
}

.tab-list-sub {
  .cm-tab-list {
    display: inline-flex;
    background: #A4A4A4;
    border-radius: 6px;
    margin: 7px;
    margin-left: 20px;
    .tab-list-item {
      margin: 5px;
    }
    .tab-list-link {
      font-size: 1.4rem;
      line-height: 20px;
      color: #F2F2F2;
      border-radius: 4px;
      padding: 2px 31px;
      &:hover,
      &.active,
      &:active {
        text-decoration: none;
        background: #FFFFFF;
        color: #535353;
      }
    }
  }
}

.tab-list-gray {
  .cm-tab-list {
    display: inline-flex;
    border-radius: 6px;
    margin: 0;
    // margin-left: 20px;
    .tab-list-item {
      margin: 5px;
    }
    .tab-list-link {
      display: block;
      width: 80px;
      text-align: center;
      font-size: 1.4rem;
      line-height: 24px;
      color: @color-black-light;
      border-radius: 4px;
      &:hover,
      &.active,
      &:active {
        text-decoration: none;
        background: @color-gray-dark;
        color: @color-white;
      }
    }
  }
}